<template>
	<view class="grey text " :class="$tm.vx.state().tmVuetify.black ? 'grey-darken-5 bk' : ''">
		<tm-menubars color="primary" title="TMUI" :shadow="0">
			<template #left>
				<view class="pl-24"><tm-images :width="86" src="static/logowhite.png"></tm-images></view>
			</template>
		</tm-menubars>
		<view>
			<view class="fixed fulled  overflow" style="z-index: 8;">
				<tm-search
				@confirm="openSearch"
				v-model="keyword"
					suffixIcon=" "
					:showRight="false"
					:fllowTheme="false"
					color="white"
					:bg-color="$tm.vx.state().tmVuetify.color || 'primary'"
					:insertColor="$tm.vx.state().tmVuetify.color || 'primary'"
					:round="4"
					placeholder="搜索组件"
					:shadow="0"
				>
					<template #suffixIcon>
						<view @click="openSearch"><tm-tags dense color="primary" model="text">搜索组件</tm-tags></view>
					</template>
				</tm-search>
			</view>
			<view style="height: 86rpx;"></view>
		</view>
		<view class="" :class="[$tm.vx.state().tmVuetify.black ? 'grey-darken-5 bk' : ($tm.vx.state().tmVuetify.color || 'primary')]">
			<view class=" pt-16 pb-24" style="" :class="[$tm.vx.state().tmVuetify.black ? 'grey-darken-5 bk' : ($tm.vx.state().tmVuetify.color || 'primary')]">
				<navigator url="gonggao" class="text-size-n text-align-center text-white pb-12" style="vertical-align: middle;">
					<text class="pr-32 text-weight-b">来自作者的一条公告《1.2.0升级注意事项》</text>
					<tm-icons dense :size="20" style="line-height: 0;" color="white" name="icon-angle-right"></tm-icons>
				</navigator>
				<view class="text-size-s text-align-center text-white opacity-8">
					<text class="pr-24 ">当前版本：{{ ver }}</text>  <text>更新时间：{{ time }}</text>
				</view>
			</view>
			<view class="pt-14 pb-n10 round-t-8" :class="[$tm.vx.state().tmVuetify.black ? 'grey-darken-5 bk' : 'grey text  ']">
				<view class="ma-32 flex-between flex-wrap">
					<view
						@click="openUrl(item.url)"
						v-for="(item, index) in list"
						:key="index"
						class=" round-8 mb-24"
						style="width: 48%;"
						
						:class="[$tm.vx.state().tmVuetify.black ? 'grey-darken-4 bk' : 'white']"
					>
						<view  class="flex-center flex-col pa-32">
							<tm-icons :color="$tm.vx.state().tmVuetify.color || 'primary'" :size="64" :name="item.icon"></tm-icons>
							<view class="text-size-lg text-weight-b">{{ item.title }}</view>
							<view class="text-size-s py-12">{{ item.label }}</view>
							<view>
								<tm-tags color="primary" size="g" model="text">{{ item.btn }}</tm-tags>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-center">
					<tm-images :width="60"  src="static/logo_great.png"></tm-images>
					<view class="px-24"></view>
					<tm-images :width="200"  src="https://jx2d.cn/yuwuimages/tmui120.3-small.png?id=6888"></tm-images>
				</view>
				<view class="py-24 px-0 text-size-xs text-grey-lighten-1 text mx-32 text-align-center">
					本UI经过细致打磨，并且还在不断的细化中，让它成为高效率、高颜值、高覆盖率的组件库，需要各方努力贡献。
					<view>请不要盗版，可免费使用。</view>
					<view class=" text-weight-b" :class="[`text-${$tm.vx.state().tmVuetify.color || 'primary'}`]">
						用户Q群：
						<text selectable>18593916</text>
					</view>
				</view>
			</view>
		</view>
		<tm-dialog v-model="show" title="提醒" content="因小程序大小限制，本demo页面过大，主体导入的js超过2mb，对于分包已无作用，因此如需查询相关demo请前往H5预览，一定是兼容小程序的,不用担心."></tm-dialog>
		<tm-flotbutton
			color="primary"
			@click="imte"
			:icon="$tm.vx.state().tmVuetify.black ? 'icon-lightbulb-fill' : 'icon-lightbulb'"
			:label="$tm.vx.state().tmVuetify.black ? '亮色' : '暗黑'"
			:show-text="true"
			:offset="[16, flootBootm]"
		></tm-flotbutton>
	</view>
</template>

<script>
// https://roundicons.com/icon-packs/free-christmas-icons/
import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
import tmDialog from '@/tm-vuetify/components/tm-dialog/tm-dialog.vue';
export default {
	components: {
		tmImages,
		tmFlotbutton,
		tmTags,
		tmMenubars,
		tmSearch,
		tmIcons,tmDialog
	},
	data() {
		return {
			show: false,
			keyword:'',
			top: 60,
			flootBootm:0,
			time: '2021/10/22',
			ver: '1.2.21',
			list: [
				{
					icon: 'icon-databaseset-fill',
					title: '基础组件',
					label: '提供了基础组件84+',
					url: '/subpages/com/index',
					btn: '预览组件'
				},
				{
					icon: 'icon-databaseset-fill',
					title: '主题切换',
					label: '暗黑，其它主题切换',
					url: 'themechange',
					btn: '前往体验'
				},
				{
					icon: 'icon-databaseset-fill',
					title: '预设样式库',
					label: '零CSS写应用',
					url: '/subpages/csspage/csspage',
					btn: '预览相关'
				},
				{
					icon: 'icon-databaseset-fill',
					title: 'lottie动画',
					label: '提供了对lottie的封装',
					url: '/subpages/lottie/index',
					btn: '前往体验'
				},
				{
					icon: 'icon-databaseset-fill',
					title: 'Echarts',
					label: '对百度图表的封装',
					url: '/subpages/echarts/index',
					btn: '前往体验'
				},
				{
					icon: 'icon-databaseset-fill',
					title: '业务组件',
					label: '提供了相关行业的组件',
					url: '/subpages/food/index',
					btn: '预览相关'
				},
				{
					icon: 'icon-databaseset-fill',
					title: '页面模板',
					label: '相关行业的页面模板',
					url: '/subpages/moban/index',
					btn: '预览模板'
				},
				{
					icon: 'icon-databaseset-fill',
					title: '游戏抽奖',
					label: '转盘|老虎机|九宫格等',
					url: '/subpages/yewu/index',
					btn: '体验相关'
				}
			]
		};
	},
	created() {
		// #ifdef H5
		this.flootBootm = 50+34
		// #endif
		// #ifndef H5
		this.flootBootm = uni.getSystemInfoSync().windowBottom
		// #endif
	},
	onLoad() {
		// #ifdef MP
		this.top = uni.upx2px(150);
		// #endif
	},
	mounted() {
		uni.showTabBar({
			animation: true
		});
	},
	methods: {
		openSearch(){
			uni.navigateTo({
				url:'search?key='+this.keyword
			})
		},
		openUrl(url){
			let t = this;
			uni.navigateTo({
				url:url,
				fail: (e) => {
					t.show = true;
				}
			})
		},
		imte() {
			this.$tm.theme.setBlack();
		},
		
	}
};
</script>

<style lang="scss">
page,
body {
	min-height: 100%;
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped></style>
